@import "../../../assets/sass/mixin";

.free-table {
  width: 100%;
  @include flexbox;
  flex-wrap: wrap;
  flex-direction: column;

  table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
  }

  .free-table-head {
    position: relative;
    font-size: .7rem;
    font-weight: bold;
    text-align: left;
  }

  .free-table-head-inner {
    @include flexbox;
    padding: .5rem 0;
    transition: all .4s cubic-bezier(.25, .8, .25, 1);
  }

  .free-table-head .free-table-head-text {
    padding: 0 .75rem;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .free-table-row {
    border-top: 1px solid #e0e0e0;
  }

  .free-table-cell-inner {
    @include flexbox;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: .5rem .75rem;
  }

  .free-table-cell {
    position: relative;
    transition: all .4s cubic-bezier(.25, .8, .25, 1);
    font-size: .7rem;
  }

  tbody .free-table-row.free-selected .free-table-cell {
    background-color: #f5f5f5
  }

  &.free-table-hover tbody .free-table-row:hover .free-table-cell {
    background-color: #f5f5f5;
  }

  &.free-table-striped tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
  }

  &.free-table-bordered {
    $border: 1px solid #e0e0e0;
    border: $border;
    tr td,
    tr th {
      border-left: $border;
    }

    tr td:first-child,
    tr th:first-child {
      border-left: none;
    }
  }

  .free-checkbox,
  .free-checkbox-inner,
  .free-checkbox-ins {
    display: flex;
    cursor: pointer;
  }

  .free-sr-only .free-checkbox-title {
    display: none;
  }

  .free-checkbox-inner input {
    -webkit-appearance: none;
    opacity: 0;
  }

  .free-checkbox-ins {
    position: relative;
    width: 1rem;
    height: 1rem;
    border-radius: 2px;
    background: #d7dce0;
    -webkit-transition: background .25s;
    -moz-transition: background .25s;
    transition: background .25s;

    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      font-family: 'FontAwesome';
      content: "\F00C";
      color: #d7dce0;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
  }

  .free-checkbox-inner > input:checked + .free-checkbox-ins {
    background: #3949ab;
  }

  .free-checkbox-inner > input:checked + .free-checkbox-ins::after {
    color: #fff;
  }

  .free-checkbox-title {
    padding-left: .3rem;
  }

  .free-table-footer {
    flex: 1 0 auto;
  }
}
